<template>
    <view>
		<view style="background-color: #fff;">
			<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="text" activeColor="#C5B3A8"></uni-segmented-control>
		</view>
        <view class="content">
            <view v-show="current === 0">
               <view class="list">
				   <view class="item" v-for="item in 10">
					   <view class="head">
						   <view class="left">
							   <view class="title">bolon眼镜(达芬奇眼镜眼镜眼镜眼镜眼镜眼镜</view>
							   <uni-icons type="right" size="22"></uni-icons>
						   </view>
						   <view class="right">
							   <image style="width: 135rpx;height: 110rpx;margin-right: 28rpx;" src="../../static/images/myorder/over.png" mode=""></image>
							   <image style="width: 28rpx;height: 32rpx;margin-right: 74rpx;" src="../../static/images/myorder/detele.png" mode=""></image>
						   </view>
					   </view>
					   <view class="mid">
						   <image class="left" src="../../static/temp/goodsthumb.png" mode=""></image>
						   <view class="right">
							   <view class="container">
								   <view class="title">墨镜女2024高级感 太阳镜防晒防紫墨镜女2024高级感 太阳镜防晒防紫</view>
								   <view class="tips">随时退 过期退  需预约</view>
							   </view>
							   <view class="price">
								   <view class="money">￥699.80</view>
								   <view class="num">x1</view>
							   </view>
						   </view>
					   </view>
					   <view class="footer">
						   <view class="btn">查看详情</view>
						   <view class="btn">再次购买</view>
						   <view class="btn">申请退款</view>
						   <view class="btn" style="color: #C5B3A8;border: 1px solid #C5B3A8;">立即使用</view>
					   </view>
				   </view>
			   </view>
            </view>
            <view v-show="current === 1">
                选项卡2的内容
            </view>
            <view v-show="current === 2">
                选项卡3的内容
            </view>
        </view>
    </view>
</template>
<script>
	export default {
	  data() {
	    return {
			items: ['选项1', '选项2', '选项3'],
			current: 0,
	    };
	  },
	  methods: {
		 onClickItem(value){
			 this.current = value.currentIndex
		 }
	  },
	};
	</script>

<style scoped lang="scss">
	page{
		background-color: #F2F2F2;
		.list{
			.item{
				background-color: #fff;
				padding: 27px 13px 30px;
				padding:50rpx 24rpx;
				margin-top: 30rpx;
				.footer{
					display: flex;
					justify-content: right;
								margin-top: 48rpx;
					.btn{
						width: 152rpx;
						height: 49rpx;
						border-radius: 24rpx;
						border: 2px solid #DADADA;
						display: flex;
						align-items: center;
						justify-content: center;
						margin-left: 30rpx;
					}
				}
				.mid{
					display: flex;
					.left{
						width: 207rpx;
						height: 207rpx;
					}
					.price{
						.money{
							font-family: Source Han Sans CN;
							font-weight: 500;
							font-size: 27rpx;
							color: #181818;
						}
						.num{
							font-family: Source Han Sans CN;
							font-weight: 400;
							font-size: 30rpx;
							color: #888888;
							text-align: right;
						}
					}
					.right{
						width: calc(100% - 207rpx);
						padding-left: 24rpx;
						display: flex;
						align-items: center;
						box-sizing: border-box;
						justify-content: space-between;
						.tips{
							font-family: Source Han Sans CN;
							font-size: 20rpx;
							color: #F55645;
						}
						.title{
							font-family: Source Han Sans CN;
							font-weight: 500;
							font-size: 32rpx;
							color: #181818;
							line-height: 44rpx;
							width: 263rpx;
							display: -webkit-box;
							  -webkit-box-orient: vertical;
							  -webkit-line-clamp: 2; /* 设置为想要的最大行数 */
							  overflow: hidden;
							  text-overflow: ellipsis;
						}
					}
				}
				.head{
					width: 100%;
					box-sizing: border-box;
					padding-bottom: 36rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					.right{
						display: flex;
						align-items: center;
					}
					.left{
						display: flex;
						.title{
							width: 318rpx;
							font-family: Source Han Sans CN;
							font-weight: bold;
							font-size: 35rpx;
							color: #000000;
							white-space: nowrap; /* 确保文本在一行内显示 */
							  overflow: hidden; /* 隐藏超出容器的文本 */
							  text-overflow: ellipsis; /* 使用省略号表示被截断的文本 */
						}
					}
				}
			}
		}
	}
	


</style>